<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="文章列表"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :pagination="true"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="creteArticle()">写文章</el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="{ row }">
        <el-button type="primary" link @click="toDetail(row.id)" :icon="View">预览</el-button>
        <el-button type="primary" link @click="editBlog('查看', row)" :icon="EditPen">编辑</el-button>
        <el-button type="primary" link @click="delBlog(row.id, row.title)" :icon="Delete">删除</el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { Article } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getArticleApi, delArticleApi, updateBlogStatus, updateBlogSort } from "@/api/modules/article";
import { useHandleData } from "@/hooks/useHandleData";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Document } from "@element-plus/icons-vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { useRoute, useRouter } from "vue-router";
import { ref, reactive } from "vue";
const proTable = ref<ProTableInstance>();
const initParam = reactive({});
const route = useRoute();
const router = useRouter();
const getTableList = (params: any) => {
  return getArticleApi(params);
};

// 写文章
const creteArticle = () => {
  router.push({ name: "articleDrafts" });
};

// 表格配置项
const columns: ColumnProps<Article.ResArticleList>[] = [
  { type: "selection", fixed: "left", width: 80 },
  {
    prop: "title",
    label: "文章标题",
    search: { el: "input" },
    width: 180,
    render: scope => {
      return <span>{scope.row.title}</span>;
    }
  },
  {
    prop: "desc",
    label: "文章摘要",
    search: { el: "input" },
    // width: 180,
    render: scope => {
      return <span>{scope.row.desc || "--"}</span>;
    }
  },
  {
    prop: "cover",
    label: "缩略图",
    width: 180,
    render: scope => {
      return <img src={scope.row.cover} style="height:50px"></img>;
    }
  },
  {
    prop: "tag_name",
    label: "关联标签",
    // search: { el: "select", props: { filterable: true, multiple: true } },
    // enum: tagListApi,
    width: 180,
    render: scope => {
      return (
        <div style=" word-wrap: break-word;white-space: pre-wrap;">
          {(scope.row.tag_name || []).map((tag: any, index: any) => (
            <el-tag key={index} class="ml-2" type="success" style="margin-right:10px;margin-bottom: 10px;">
              {tag}
            </el-tag>
          ))}
        </div>
      );
    }
  },
  {
    prop: "sort",
    label: "排序(数值大靠前显示)",
    width: 180,
    render: scope => {
      return <el-input v-model={scope.row.sort} onBlur={(e: any) => sortChange(e, scope.row.id)} class="ml-2" />;
    }
  },
  {
    prop: "status",
    label: "状态",
    width: 180,
    render: scope => {
      return (
        <el-switch
          model-value={scope.row.status}
          class="ml-2"
          active-text="开启"
          inactive-text="关闭"
          inline-prompt
          active-value={1}
          inactive-value={0}
          onClick={() => statusChange(scope.row)}
        />
      );
    }
  },
  { prop: "operation", label: "操作", fixed: "right", width: 220 }
];

const editBlog = (title: string, row: Partial<Article.ResArticleList> = {}) => {
  const id = row.id;
  if (id) {
    router.push({ name: "articleDrafts", query: { id } });
  } else {
    router.push({ name: "articleDrafts" });
  }
};

const delBlog = async (id: number, title: string) => {
  await useHandleData(delArticleApi, { id }, `删除文章标题【${title}】这条数据`);
  proTable.value?.clearSelection();
  proTable.value?.getTableList();
};

const toDetail = (id: number) => {
  router.push({ name: "articleDetail", query: { id } });
};

const statusChange = async (e: any) => {
  await updateBlogStatus({ id: e.id });
  proTable.value?.getTableList();
};

const sortChange = async (e: any, id: number) => {
  await updateBlogSort({ id: id, value: e.target.value });
  proTable.value?.getTableList();
};
</script>

<style scoped lang="scss">
:deep(.el-upload) {
  display: inline-block;
}
.up-btn {
  display: inline-block;
  margin: 0 10px;
}
</style>
